<template>
    <view class="page">
        <u-tabbar :value="currentTabbar" :fixed="true" :placeholder="false" :activeColor="activeColor" :safeAreaInsetBottom="false">
            <u-tabbar-item text="首页" @click="toPage()">
                <image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabBar/home_active.png"></image>
                <image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabBar/home.png"></image>
            </u-tabbar-item>
            <u-tabbar-item text="订单" @click="toPage()">
                <image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabBar/order_active.png"></image>
                <image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabBar/order.png"></image>
            </u-tabbar-item>
            <u-tabbar-item text="我的" @click="toPage()" :badge="badge">
                <image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabBar/mine_active.png"></image>
                <image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabBar/mine.png"></image>
            </u-tabbar-item>
        </u-tabbar>
    </view>
</template>
  <script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            bgColor: "#ffffff",
            borderTop: true,
            list: [
                {
                    iconPath: "/static/tabBarMini/tab_01.png",
                    selectedIconPath: "/static/tabBarMini/tab_02.png",
                    text: "首页",
                    pagePath: "/pages/index/index",
                },
                {
                    iconPath: "/static/tabBarMini/tab_03.png",
                    selectedIconPath: "/static/tabBarMini/tab_04.png",
                    text: "服务",
                    pagePath: "/pages/service/index",
                },
                // {
                //     iconPath: "/static/tabBarMini/tab_07.png",
                //     selectedIconPath: "/static/tabBarMini/tab_08.png",
                //     text: "商城",
                //     pagePath: "/pages/your-page-path", // 添加页面路径
                // },
                {
                    iconPath: "/static/tabBarMini/tab_09.png",
                    selectedIconPath: "/static/tabBarMini/tab_10.png",
                    text: "我的",
                    pagePath: "/pages/my/my",
                    count: 0,
                },
            ],
            inactiveColor: "#9b9b9b",
            activeColor: "#2e996f",
            value4: 0,
            badge: 0
        };
    },
    computed: {
        ...mapState({
            currentTabbar: state => state.user.currentTabbar,
            unreadMessages: state => state.user.unreadMessages,
        }),
        totalCount: {
            get() {
                this.list[2].count = this.unreadMessages
                return this.list[2].count;
            },
            set(val) {
                this.list[2].count = val;
            }
        }
    },
    watch: {
        "totalCount": {
            handler(val) {
                this.badge = val
            }
        }
    },
    created() {
        console.log(this.totalCount, "totalCount444")
        this.badge = this.totalCount
    },
    methods: {
        toPage(e) {
            console.log(e, this.value4)
            let url = ''
            if (e == 0) {
                url = '/pages/index/index'
            } else if (e == 1) {
                url = '/pages/order/index'
            } else if (e == 2) {
                url = '/pages/mine/index'
            }
            this.$store.commit('SET_CURRENTTABBAR', e)
            uni.switchTab({
                url: url
            })
        }
    },
};
</script>
<style scoped lang="scss">
.page {
  image {
    width: 40rpx;
    height: 40rpx;
  }
}
</style>